<template>
  <div class="multistage">
    <div v-if="data != null" class="comments">
        <div class="comment" v-for="item in data" :key="item.id">
            <div class="content">
                <div class="contenthead">
                    <span class="tangle"></span>
                    <a class="author">{{item.name+item.time}}</a>
                    <a href="javascript:void(0);" v-show="item.isShow"
                    @click="item.isShow = !item.isShow">
                        [-]
                    </a>
                    <a href="javascript:void(0);" v-show="!item.isShow"
                    @click="item.isShow = !item.isShow">
                        [+]
                    </a>
                </div>
                <div class="contentBody" v-show="item.isShow">
                    <div class="text">{{item.text}} </div>
                    <div class="actions">
                        <a class="reply" href="javascript:void(0);"
                        @click="item.showtext = !item.showtext">
                        reply
                        </a>
                    </div>
                    <add-comment :preId="item.id" v-if="item.showtext" @handleAddComment="item.showtext=!item.showtext"></add-comment>
                    <comment :data="item.children"></comment>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import addComment from './addComment.vue'
export default {
  name: 'Comment',
  components: {
    addComment
  },
  props: ['data'],
  data () {
    return {
      showtext: true
    }
  }
}
</script>
<style scoped>
.multistage{
    margin-left:20px;
}
.author {
  color: gray;

}
.tangle{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid gray;
}
.contenthead{
    position: relative;
}
.tangle{
    position: absolute;
    left: -15px;
    top: 5px;
}
</style>
